<template>
    <div class="tran">
        <h3>{{ $t('language.tran.name') }}</h3>
        <dl>
            <dd>
                <span>{{ $t('language.tran.currency') }}</span><el-select class="select" v-model="tranForm.coinType"
                    placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </dd>
            <dd>
                <span>{{ $t('language.tran.Type') }}</span><el-select class="select" v-model="tranForm.coinType"
                    placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </dd>
            <dd>
                <span>{{ $t('language.tran.transaction') }}</span><el-select class="select" v-model="tranForm.coinType"
                    placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </dd>
            <dd>
                <span></span>
                <client-only>
                    <el-date-picker @change="initData"  v-model="timerange" type="datetimerange"
                        format="YYYY-MM-DD HH:mm:ss" />
                    <!-- <el-date-picker @change="initData" v-model="timerange" type="datetimerange" 
                        format="YYYY-MM-DD HH:mm:ss" /> -->
                </client-only>
            </dd>
        </dl>
        <el-table  :data="recordData.gameRecords" show-overflow-tooltip highlight-current-row style="width: 926px;overflow-x: auto;"
        max-height="530" :empty-text="$t('language.tran.nodata')" border
            header-row-class-name="headclass">
            <el-table-column fixed  type="index" :label="$t('language.tran.table1.title1')" align="center" width="100" />
            <el-table-column  prop="recordTime" :label="$t('language.tran.table1.title2')" align="center"  />
            <el-table-column  prop="recordId" :label="$t('language.tran.table1.title3')" align="center"  />
            <el-table-column  align="center" :label="$t('language.tran.table1.title4')">
                <template #default="{ row }">
                    {{ row.coinType == 0 ? 'BRL' : 'USDt' }}
                </template>
            </el-table-column>
            <el-table-column  align="center" prop="coins" :label="$t('language.tran.table1.title5')" />
            <el-table-column  align="center" prop="coins" :label="$t('language.tran.table1.title6')" />
        </el-table>
        <div class="page">
            <el-pagination background layout="sizes,prev, pager, next" v-model:current-page="tranForm.pageIndex"
                :page-sizes:="[10, 20, 30, 40]" v-model:page-size="tranForm.pageSize"
                :total="recordData.page.totalCount" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]
// 获取当前时间
const defaultTime2: [Date, Date] = [
    new Date(),
    new Date(),
] // '12:00:00', '08:00:00'
let store = useStore()
let userinfo = computed(() => store.userinfo)
let tranForm = reactive({
    id: userinfo.value.gameID,
    coinType: 0,
    platformId: 0,
    startDateTime: getAllTime('-'),
    endDateTime: getAllTime('-'),
    pageIndex: 1,
    pageSize: 10
})
let timerange = ref<[Date, Date]>([
    new Date(),
    new Date(),
])
let recordData: any = reactive({
    page: {
        pageIndex: 0,
        pageSize: 0,
        totalCount: 0
    },
    gameRecords: []
})

const options = [
    {
        value: 0,
        label: t("language.tran.all"),
    },
    {
        value: 1,
        label: "BRL",
    },
    {
        value: 2,
        label: "USDT",
    },
];


//加载loading
let loadingtran = ref<boolean>(true)
//数据初始化
let initData = async (e = []) => {
    console.log(defaultTime2, 'initData');
    if (e.length != 0) {
        tranForm.startDateTime = e[0]
        tranForm.endDateTime = e[1]
    }
    loadingtran.value = true
    await nextTick()
    await useHttpPOST("/Assets/v1.0/Accounts/Flow", tranForm).then((res: any) => {
        recordData.gameRecords = res.data.value.data.records
        recordData.page = res.data.value.data.page
    }).finally(() => {
        loadingtran.value = false
    })
}
//监听时间以及数据是否发生变化
watch([() => timerange, () => tranForm], () => {
    initData()
}, {
    deep: true,
    immediate: true
})
</script>
<style lang="scss">
.el-pager .number {
    color: #b5bac8 !important;
}

.el-pager .is-active {
    color: #0a906c !important;
}

.el-select .el-input.is-focus:not(.el-input--prefix) .el-input__inner:focus {
    box-shadow: none !important;
}

.el-select__wrapper {
    border: 1px solid rgb(74, 76, 83) !important;
}

.el-select,
.el-select__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff !important;

    .is-hovering {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
    }

    .el-select__placeholder {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
    }

    .is-focused {
        color: #fff !important;
        border: 1px solid #0a906c !important;
        box-shadow: none !important;
        outline: none !important;
    }


}

.el-scrollbar__wrap,
.el-popper,
.el-select-dropdown,
.el-scrollbar,
.el-scrollbar__view,
.el-select-dropdown,
.el-select-dropdown__wrap,
.el-select-dropdown__list {
    background-color: rgb(39, 42, 48) !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;

    .el-select-dropdown__item {
        color: #b9bdc9 !important;


    }

    .is-hovering {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
        font-weight: bold;
    }

    .selected {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
        font-weight: bold;
    }
}

.el-popper__arrow::before {
    background-color: rgb(39, 42, 48) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}





.tran {
    width: 100%;
    .el-input__inner {
        color: #fff !important;
    }
   
    .el-table th,
    .el-table td,
    .el-table tr {
        background-color: transparent !important;


    }

    .el-table td,
    .el-table th,
    .el-table--border,
    .el-table__inner-wrapper {
        border-color: #4b4e55 !important;
        color: #b5bac8 !important;
    }

    .el-table td {
        padding: 4px 0;
    }

    .el-table {
        --el-table-border-color: #4b4e55 !important;
        margin-top: 20px;

        .headclass {
            font-size: 14px;
            color: #b5bac8;
            font-weight: bold;
            background-color: rgb(61, 65, 72) !important;
        }

        :deep(.el-table__body) {
            background-color: transparent !important;
        }
    }

    .select {
        height: 40px !important;
        width: 110px;

        .el-select__wrapper {
            background-color: rgb(39, 42, 48) !important;
            border-radius: 8px !important;
            border: 1px solid rgb(74, 76, 83) !important;
            box-shadow: none !important;
        }

        .is-focused {
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .el-input--suffix {
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .is-hovering {
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;

        }
    }



}



/*
.custom-time .el-input__inner {
  color: #fff !important;
}
.custom-time .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}
.custom-time  .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}
.custom-time .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}*/
</style>
<style scoped lang="scss">
.tran {
    width: 100%;
    height: 100%;
    h3 {
        font-size: 24px;
        color: #fff;
    }

    dl {
        width: 100%;
        margin-top: 20px;
        @include flex(row, flex-start, center);

        dd {

            @include flex(column, flex-start, flex-start);

            span {
                display: block;
                height: 20px;
                color: #fff;
            }
        }

        dd+dd {
            margin-left: 50px;
        }
    }

    .nodata {
        border: 1px solid #4b4e55;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        padding: 0;
        border: 1px solid #3d4148;

        thead {
            height: 65px;

            th {
                text-align: center;
                font-size: 14px;
                color: #b5bac8;
                height: 100%;
                padding: 8px;
                line-height: 24px;
                font-weight: bold;
                background-color: rgb(61, 65, 72);
                border: 1px solid #4b4e55;
            }
        }



        tbody {
            width: 100%;
            display: block;
            height: 100px;
            overflow: auto;

            tr {

                width: 100%;

                td {

                    text-align: center;
                    font-size: 14px;
                    color: #b5bac8;
                    padding: 4px 8px;

                    border: 1px solid #3d4148;

                    img {
                        width: 40px;
                    }
                }

                .nodata {
                    width: 100%;
                    padding: 20px 0;
                    color: #909399;
                    font-size: 14px;
                }
            }

        }



    }

    .page {
        margin-top: 20px;
        @include flex(row, flex-end, center);
    }
}
</style>